<template>
  <a-form ref="formStep3Ref" :model="form.formStep3" layout="vertical" v-bind="layout">
    <a-collapse :default-active-key="activeKeys">
      <template #expandIcon="{ isActive }">
        <caret-right-outlined :rotate="isActive ? 90 : 0" />
      </template>
      <a-collapse-panel key="4" header="基本信息5">
        <a-row :gutter="16">
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoUnique" label="唯一值">
              <a-input v-model:value="form.formStep3.demoUnique" disabled />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoModalSelect" label="弹窗">
              <AvicModalSelect
                v-model:value="form.formStep3.demoModalSelect"
                :default-show-value="form.formStep3.demoModalSelect"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoBackgroundColor" label="背景样式">
              <a-input v-model:value="form.formStep3.demoBackgroundColor" disabled />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols2">
            <a-form-item name="demoRichtext" label="富文本">
              <div ref="richtextDetail" class="Richtext">
                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :default-config="toolbarConfig" />
                <Editor
                  v-model:value="form.demoRichtext"
                  style="height: 500px; overflow-y: auto"
                  :default-config="editorConfig"
                  @onCreated="onCreated"
                />
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoText2" label="测试文本">
              <a-input v-model:value="form.formStep3.demoText2" disabled />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols2">
            <a-form-item label="附件">
              <AvicUploader
                element-id="1"
                form-type="detail"
                :allow-add="false"
                :allow-download="true"
                :allow-preview="true"
                :form-id="form.id"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
  </a-form>
</template>
<script lang="ts" setup>
import { useDemoMainNestForm, emits } from './ts/DemoMainNestForm'; // 引入表单ts
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'; // 引入富文本依赖
import '@wangeditor/editor/dist/css/style.css'; // 引入富文本样式

const props = defineProps({
  formId: {
    type: String,
    default: ''
  },
  form: {
    type: Object,
    default: null
  }
});
const emit = defineEmits(emits);
const activeKeys = ['4'];
const {
  formStep3Ref,
  layout,
  colLayout,
  uploadFile,
  richtextDetail,
  toolbarConfig,
  editorConfig,
  editorRef,
  onCreated
} = useDemoMainNestForm({
  props,
  emit
});
defineExpose({
  formStep3Ref,
  uploadFile,
  editorRef
});
</script>
